<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 1、什么是媒体查询 media query */

    /* 所有屏幕宽度大于等于900px满足条件 */
    @media screen and (min-width: 900px) {
      body {
        background-color: red;
      }
    }

    /* 2、为什么需要媒体查询 */

    /* 一套样式不可能适应各种大小的屏幕
    针对不同的屏幕大小写不同的样式
    让我们的页面在不同大小的屏幕上都能正常显示 */

    /* 3、媒体的类型 all(default)
     screen/print/speech*/

    /* all */
    @media (min-width: 900px) {
      body {
        background-color: red;
      }
    }

    /* print */
    @media print and (min-width: 900px) {
      body {
        background-color: red;
      }
    }

    /* 4、媒体查询的中的逻辑
    与（and）
    或（，）
    非（not）
    */

    /* 与（and） */
    @media screen and (min-width: 900px) and (max-width: 1024px) {
      body {
        background-color: red;
      }
    }

    /* 或,单使用逗号后面代表all */
    @media screen and (min-width: 900px),
    screen and (max-width: 1024px) {
      body {
        background-color: red;
      }
    }

    /* 或,前后都代表screen */
    @media screen and (min-width: 900px),
    screen and (max-width: 1024px) {
      body {
        background-color: red;
      }
    }

    /* 非 前后都取非 */
    @media not screen and (min-width: 900px) and (max-width: 1024px) {
      body {
        background-color: red;
      }
    }

    /* 仅前面取反 */
    @media not screen and (min-width: 900px),
    screen and (max-width: 1024px) {
      body {
        background-color: red;
      }
    }

    /* 5、媒体特征表达式
    width/max-width/min-width
    物理像素和css像素的比例
    -webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
    orientation（landscape/portrait）横屏竖屏


    height
    device-width/device-height
    screen.width/screen.height
    aspect-ratio 视口的宽高比 
    */
  </style>
</head>

<body>

</body>

</html>